Bootstrap Table API 中文版（完整翻译文档）

2023-08-04 15:47| 来源: 网络整理| 查看: 265

/* *bootstrap的代码本质是jQuery，所以bootstrap的代码就是使用jQuery的代码格式书写为基础语法 *$('#table').bootstrapTable({}); *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽 *最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型， *默认值不翻译，例如："class"、"id"等不翻译。 *有错请提出，会及时改正，谢谢。 *Bootstrap table 中文文档（完整翻译文档）如果想转请注明@Sclifftop * */

“名称”可以写在$('#table').bootstrapTable({});的大括号中，可以定义一些想要的值，如：

$("#realTime_Table").bootstrapTable({ search: true, pagination: false, pageSize: 15, pageList: [5, 10, 15, 20], showColumns: true, showRefresh: false, showToggle: true, locale: "zh-CN", striped: true });

“属性”放在声明表内，如：日期新增用户活跃用户

如果名称和属性功能类似，则任意一个地方就够了，不用重复定义，有的属性写在js里比名称写在声明表中更为简单，or vice verse（有的属性必须要写，对应的名称只是表示是否启用那个属性）表的各项(Table options )

定义在 jQuery.fn.bootstrapTable.defaults 文件内

名称属性类型默认值作用描述-data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用classesdata-classesStringtable table-hover表的class属性，如果没有自己定义，则默认有边框，并且当鼠标悬浮在那一行，背景会变为浅灰色.sortClassdata-sort-classStringundefined声明表格td的class名，代表此列元素的class名将被排序heightdata-heightNumberundefined表格的高度undefinedTextdata-undefined-textString-当不写任何内容默认显示’-‘stripeddata-stripedBooleanfalse默认false，当设为true，则每行表格的背景会显示灰白相间sortNamedata-sort-nameStringundefined定义哪一列的值会被排序，写data-field的自定义名，默认递增（asc）sortOrderdata-sort-orderStringasc同上面的结合使用，默认递增（asc），也可设为递减（desc）sortStabledata-sort-stableBooleanfalse（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加’_position’属性iconsPrefixdata-icons-prefixStringglyphicon定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用iconSizedata-icon-sizeStringundefined定义的图标大小： - undefined =>默认表示默认的按钮尺寸（btn） - xs =>超小按钮的尺寸（btn-xs） - sm =>小按钮的尺寸（btn-sm） - lg =>大按钮的尺寸（btn-lg）buttonsClassdata-buttons-classStringdefault按钮的类，默认为default。 - 可选的有：primary、danger、warning等等 - 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加”btn-“，默认为btn-default（白色） - 参考菜鸟教程：Bootstrap 按钮iconsdata-iconsObject{ paginationSwitchDown: ‘glyphicon-collapse-down icon-chevron-down’, paginationSwitchUp: ‘glyphicon-collapse-up icon-chevron-up’, refresh: ‘glyphicon-refresh icon-refresh’, toggle: ‘glyphicon-list-alt icon-list-alt’, columns: ‘glyphicon-th icon-th’, detailOpen: ‘glyphicon-plus icon-plus’, detailClose: ‘glyphicon-minus icon-minus’ }定义在工具栏、分页、详细视图中使用的图标 - 没办法解释，请参考菜鸟教程的图标：Bootstrap 字体图标columns-Array[]默认空数组，在JS里面定义，field即data-field，title就是每列表头名等等。 - 请参考：点击Bootstrap-table的右侧边栏Usagedata-Array[]被加载的数据。 - 也就是从服务器获取的数据，通过”.”运算符获取，例如”data.date/data.anything”，后面是服务器发来的字段名dataFielddata-data-fieldStringrows - 名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value。 - 原文：获取每行数据json内的key - 例如：{“name”:”zz”,”age”:20}，name和age就是key，如果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯一的ajaxdata-ajaxFunctionundefined - ajax方法，和jQuery的ajax方法类似 - 参考 BootstrapTable实现定时刷新数据，只是参考，因为那是jQuery的ajax方法methoddata-methodStringget向服务器请求远程数据的方式，默认为’get’，可选’post’urldata-urlStringundefined向服务器请求的url。 - 例如：server + “get_app_player”和server + ‘get_channel_list’，两者都是向server（server是自己定义的，例如”http://kanshakan.nichousha.com/”）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息下面看看原文： - 向远程站点请求数据的URL - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式： Without server-side pagination（没有启用服务端分页 - data1.json） With server-side pagination（启用服务端分页 - data2.json）cachedata-cacheBooleantrue默认缓存ajax请求，设为false则禁用缓存contentTypedata-content-typeStringapplication/json请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。 - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串dataTypedata-data-typeStringjson期望从服务器获取的数据的类型，默认为json格式字符串ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项，默认无附加 - 参考 jQuery.ajax()queryParamsdata-query-paramsFunction function(params){ return params;} 当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。 - queryParamsType=”limit”，它的参数包括：limit，offset，search，sort，order Else - params包括：pageSize，pageNumber，searchText，sortName，sortOrder - 当return false，请求则终止queryParamsTypedata-query-params-typeStringlimit默认”limit”，设置该属性用来发送符合RESTful格式的参数responseHandlerdata-response-handlerFunction function(res){ return res;} 在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）paginationdata-paginationBooleanfalse默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示paginationLoopdata-pagination-loopBooleantrue默认true，分页条无限循环onlyInfoPaginationdata-only-info-paginationBooleanfalse前提：pagination设为true，启用了分页功能。 - 默认false，设为true显示总记录数sidePaginationdata-side-paginationStringclient设置在哪进行分页，默认”client”，可选”server”，如果设置 “server”，则必须设置url或者重写ajax方法 - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式： Without server-side pagination（没有启用服务端分页） With server-side pagination（启用服务端分页）pageNumberdata-page-numberNumber1前提：pagination设为true，启用了分页功能。 - 默认第1页，用于设置初始的页数pageSizedata-page-sizeNumber10前提：pagination设为true，启用了分页功能。 - 默认每页显示10条记录，用于设置每页初始显示的条数pageListdata-page-listArray[10, 25, 50, 100]前提：pagination设为true，启用了分页功能。 - 默认为[10, 25, 50, 100]，即可以选择”每页显示10/25/50/100条记录”，用于设置选择每页显示的条数selectItemNamedata-select-item-nameStringbtSelectItemradio（单选按钮）或checkbox（复选框）的字段名smartDisplaydata-smart-displayBooleantrue默认为true，会机智地（

【本文地址】

公司简介

联系我们